<template>
    <div class="foodEditContent" :style="{ marginTop: marginTop + 'px' }">
        <div class="title">
            <div>
                菜品编辑
            </div>
            <a-button type="primary" @click="submitForm">确定</a-button>
        </div>
        <a-form-model ref="form" :model="model" :rules="validatorRules">
            <a-row>
                <a-col :span="24">
                    <a-form-model-item label="商品名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="foodName">
                        <a-input placeholder="请填写商品名称" v-model="model.foodName"></a-input>
                    </a-form-model-item>
                    <a-form-model-item label="菜品图片" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="foodPic">
                        <img @click="showImgCropper"
                            src="https://www.yongshantuan.cn/images/yongshan/platformSide/addImg.png" v-if="!model.foodPic">
                        <img style="max-width: 150px" @click="showImgCropper" :src="model.foodPic" v-if="model.foodPic"
                            alt="" />
                    </a-form-model-item>
                    <a-form-model-item label="商品描述" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="foodDescription">
                        <a-input type="textarea" placeholder="请填写商品描述" v-model="model.foodDescription"
                            style="min-height: 100px;"></a-input>
                    </a-form-model-item>
                    <a-form-model-item label="规格" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="specifications">
                        <div class="spec">
                            <a-checkbox @change="onChange" v-model="model.isUseSpecifications"> 启用规格</a-checkbox>
                            <a-button type="primary" @click="addFirstSpec">添加一级规格</a-button>
                        </div>
                        <div class="specContent">
                            <div v-for="(item, index) in model.specifications" :key="index">
                                <div class="specList">
                                    <div class="">
                                        <a-input type="text" v-model="item.specificationName" :clearable="false"
                                            placeholder="一级规格名称"></a-input>
                                    </div>
                                    <div class="">
                                        <a-button type="primary" icon="plus" style="margin-left: 5px"
                                            @click="addSecoundSpec(index)" />
                                        <a-button type="danger" icon="minus" style="margin-left: 5px"
                                            @click="delFirstSpec(index)" />
                                    </div>
                                </div>
                                <template v-if="item.nextSpecifications && item.nextSpecifications.length != 0">
                                    <div class="specList secound" v-for="(childItem, childIndex) in item.nextSpecifications"
                                        :key="childIndex">
                                        <div class="">
                                            <div class="">
                                                <a-input type="text" :clearable="false"
                                                    v-model="childItem.specificationName" placeholder="二级规格名称">
                                                </a-input>
                                            </div>
                                            <div class="">
                                                <a-input-number
                                                    v-if="model.commodityPrice === '' || model.commodityPrice === null"
                                                    type="text" :clearable="false" v-model="childItem.price"
                                                    placeholder="价格">
                                                </a-input-number>
                                            </div>
                                        </div>
                                        <div class="">
                                            <a-button type="danger" icon="minus" style="margin-left: 5px"
                                                @click="delSecoundSpec(index, childIndex)" />
                                        </div>
                                    </div>
                                </template>
                            </div>
                        </div>
                    </a-form-model-item>
                    <a-form-model-item label="限购" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="limitNum">
                        <a-input-number placeholder="-1表示不限购" v-model="model.limitNum"
                            style="width: 100%;"></a-input-number>
                    </a-form-model-item>
                    <a-form-model-item label="合作单价" :labelCol="labelCol" :wrapperCol="wrapperCol">
                        <a-input prefix="￥" placeholder="请填写合作单价" v-model="model.cooperatePrice"></a-input>
                    </a-form-model-item>
                    <a-form-model-item label="售卖单价" :labelCol="labelCol" :wrapperCol="wrapperCol">
                        <a-input prefix="￥" placeholder="请填写售卖单价" v-model="model.salePrice"></a-input>
                    </a-form-model-item>
                </a-col>
            </a-row>
        </a-form-model>
        <ImgCropper ref="imgCropper" @getImgSrc="getImgSrc"></ImgCropper>
    </div>
</template>

<script>
import ImgCropper from '@/views/hc/modules/imgCropper'
import { postAction, getAction, deleteAction } from '@api/manage'
export default {
    name: 'AntDesignVueJeecgCreate',
    components: { ImgCropper },
    props: ['marginTop'],
    data() {
        let checkPicure = (rule, value, callback) => {
            console.log('foodPic', this.model.foodPic);
            if (!this.model.foodPic) {
                callback(new Error('请上传商品图片'));
            } else {
                callback();
            }
        }
        let checkLimitNum = (rule, value, callback) => {
            if (!this.model.limitNum) {
                callback(new Error('请填写限购数量'));
            } else {
                if (this.model.limitNum < -1) {
                    callback(new Error('限购最小只能为-1'));
                } else {
                    callback();
                }
            }
        }
        return {
            visible: false,
            model: {
                specifications: [],
                limitNum: -1
            },
            labelCol: {
                xs: { span: 24 },
                sm: { span: 5 },
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 19 },
            },
            validatorRules: {
                foodName: [{ required: true, message: '请填写商品名称!' }],
                foodPic: [{ required: true, validator: checkPicure, trigger: 'blur' }],
                limitNum: [{ required: true, validator: checkLimitNum }]
            },
            type: '',
        };
    },

    mounted() {

    },

    methods: {
        //设置默认值并显示
        setDefault(type, record) {
            this.type = type
            if (type == 'add') {
                console.log('!!!!!')
                this.model = { specifications: [], limitNum: -1 };
            } else if (type == 'edit') {
                console.log('----')
                this.model = JSON.parse(JSON.stringify(record));
                this.model.isUseSpecifications = this.model.isUseSpecifications == 'yes' ? true : false
            }
        },
        changeModelValue(record) {
            console.log('*****')
            let { limitNum, foodName, cooperatePrice, salePrice } = JSON.parse(record);
            console.log(limitNum, foodName, cooperatePrice, salePrice);
            this.model.limitNum = limitNum;
            this.model.foodName = foodName;
            this.model.cooperatePrice = cooperatePrice;
            this.model.salePrice = salePrice;
        },
        clearData() {
            this.model = { specifications: [] };
        },
        //展示图片裁剪弹窗
        showImgCropper() {
            this.$refs.imgCropper.show()
        },
        //图片裁剪上传后的回调
        getImgSrc(value) {
            this.model.foodPic = value
            this.$forceUpdate()
        },
        //是否启用规格单选框值更改时触发
        onChange(e) {
            this.model.isUseSpecifications = e.target.checked
        },
        //添加一级规格
        addFirstSpec() {
            if (this.model.specifications) {
                let flag = false
                this.model.specifications.forEach((item) => {
                    if (!item.specificationName) {
                        this.$message.warning('请填写一级规格名称')
                        flag = true
                    } else {
                        item.nextSpecifications.forEach((childItem) => {
                            if (!childItem.specificationName) {
                                this.$message.warning('请填写二级规格名称')
                                flag = true
                            }
                        })
                    }
                })
                console.log('falg', flag)
                if (flag) {
                    return
                }
                this.$set(this.model.specifications, this.model.specifications.length, {
                    specificationName: '',
                    nextSpecifications: [
                        {
                            specificationName: '',
                        },
                    ],
                })
            } else {
                this.$set(this.model, 'specifications', [{ specificationName: '', nextSpecifications: [{ specificationName: '' }] }])
            }
        },
        //添加二级规格
        addSecoundSpec(index) {
            let flag = false
            this.model.specifications.forEach((item) => {
                console.log('item', item)
                if (!item.specificationName) {
                    this.$message.warning('请先填写对应的一级规格名称')
                    flag = true
                }
            })
            if (flag) {
                return
            }
            this.model.specifications[index].nextSpecifications.push({
                specificationName: ''
            })
        },
        //删除一级规格
        delFirstSpec(index) {
            this.model.specifications.splice(index, 1)
        },
        //删除二级规格
        delSecoundSpec(index, childIndex) {
            this.model.specifications[index].nextSpecifications.splice(childIndex, 1)
        },
        cancel() {
            this.model = {
                specifications: [],
                limitNum: -1
            }
        },
        submitForm() {
            this.$refs.form.validate(async valid => {
                if (valid) {
                    let params = JSON.parse(JSON.stringify(this.model));
                    params.isUseSpecifications = params.isUseSpecifications ? 'yes' : 'no'
                    if (this.type == 'add') {
                        this.$emit('addFood', params);
                    } else if (this.type == 'edit') {
                        this.$emit('editFoodInfoByForm', params)
                    }
                }
            })
        },
        getMaxHeight(){

        }
    },
};
</script>

<style lang="scss" scoped>
$default-flex-direction: row; //flex布局的方向
$fls: flex-start; //flex布局行的方向
$ali: center; //flex布局列的方向

@mixin flexs($direction: $default-flex-direction, $row: $fls, $column: $ali) {
    display: flex;
    justify-content: $row;
    align-items: $column;

    @if $direction {
        @if $direction==_ {
            flex-direction: $default-flex-direction;
        }

        @else {
            flex-direction: $direction;
        }
    }

    @if $row {
        @if $row==_ {
            justify-content: $fls;
        }

        @else {
            justify-content: $row;
        }
    }

    @if $column {
        @if $column==_ {
            align-items: $ali;
        }

        @else {
            align-items: $column;
        }
    }
}

.foodEditContent {
    border: 1px solid #eee;
}

.specList {
    @include flexs(_, space-between, _);

    ::v-deep .ant-input-number {
        margin-bottom: 0;
    }

    div {
        @include flexs();
        margin-bottom: 10px;

        &:nth-child(2) {
            margin-left: 10px;
        }
    }

    img {
        cursor: pointer;
    }

    .add {
        width: 20px;
        height: 20px;
        margin-left: 10px;
    }

    .del {
        width: 25px;
        height: 25px;
        margin-left: 10px;
    }
}

.secound {
    margin-left: 20px;

    >div {
        >div:nth-child(2) {
            width: 70px;
        }
    }
}

.spec {
    @include flexs(_, space-between, _);

    >div {
        @include flexs();
        color: #f1b825;
        cursor: pointer;
    }
}

.foodEditContent {
    padding: 0 10px 10px 10px;

    .title {
        @include flexs(_, space-between, _);
        padding: 10px 0;
        margin-bottom: 20px;
        border-bottom: 1px solid #eee;
    }
}
</style>